/**
 * 
 */
define([ "common", "globalsettings", "components","abstractPage" ],
    function($, gs, Component, Page) {
      var ws = {};

      var COLOR = {};
      
      /**
       * 设计场景中使用的组件.
       * <p>不会触发组件本身的click等事件，而是响应设计过程中的操作</p>
       */
      ws.DesignComponent = defClass(Component, function(settings) {
        //console.log("hehe")
      }, "wsDesignComponent");

      defineFunction.call(ws.DesignComponent.prototype,"beforeRender", function(
          page, c, vw, vh, bw, bh) {
        page.asDesign = true;
      });

      defineFunction.call(ws.DesignComponent.prototype,"afterRender", function(page,
          c, vw, vh, bw, bh) {
        page.asDesign = false;
      });

      defineFunction.call(ws.DesignComponent.prototype,"renderComp", function(page,
          c, vw, vh, bw, bh) {
        
      });
      
      /**
       * 组件容器.
       * <p>为组件提供设计操作支持,例如：从toolkit面板中拖拽。</p>
       */
      ws.DesignContainer = defClass(ws.DesignComponent,function(settings){
        var self = this;
        self.settings = $.extend({}, {
          offsetX:0,
          offsetY:0,
          compFactory:function(){return new Component();}
        }, self.settings, settings);
        self.compInstance=self.settings.compFactory();
      },"wsDesignContainer");
      
      defineFunction.call(ws.DesignContainer.prototype,"renderComp", function(page,
          c, vw, vh, bw, bh) {
        var self = this;
        var args = arguments;
        c.render(function(){
          c.t(self.settings.offsetX,self.settings.offsetY);
          if(!self.compInstance){
            return;
          }
          
          self.compInstance.renderComp.apply(self.compInstance,args);
          
        });
      });
      
      /**
       * 屏幕类.
       */
      ws.Screen = defClass( ws.DesignComponent,
          function(settings) {
            var self = this;
            self.settings = $.extend({}, {
              top : 0,
              left : 0,
              width : 750,
              screen : {
                background : "white",
                width : 750,
                height : 1334
              }
            }, self.settings, settings);
            self.top = self.settings.top;
            self.left = self.settings.left;
            self.width = self.settings.width;
            self.height = self.settings.screen.height
                / self.settings.screen.width * self.width;
            self.r = self.width / self.settings.screen.width;

            self.ctrlLayer = new Layer("ctrl");
            self.topLayers = [];
            self.mainLayers = [];

            self.addMainLayer(new Layer("main"));// this.mainLayers[0];
            self.mainLayer = this.mainLayers[0];
            self.addTopLayer(new Layer("top"));// this.mainLayers[0];
            self.topLayer = this.topLayers[0];
          }, "wsScreen");

      ws.Screen.prototype.ctrlLayer = new Layer();
      ws.Screen.prototype.topLayers = [];
      ws.Screen.prototype.mainLayers = [];
      ws.Screen.prototype.mainLayer = undefined;
      ws.Screen.prototype.topLayer = undefined;
      
      ws.Screen.prototype.addMainLayer=Page.prototype.addMainLayer;
      ws.Screen.prototype.addTopLayer=Page.prototype.addTopLayer;
      ws.Screen.prototype.removeMainLayer=Page.prototype.removeMainLayer;
      ws.Screen.prototype.removeMainLayerByName=Page.prototype.removeMainLayerByName;

      defineFunction.call(ws.Screen.prototype,"renderComp", function(page, c, vw,
          vh, bw, bh) {
        var self = this;

        // self["renderComp::wsDesignComponent"].apply(self,arguments);
        self.beforeRender(page, c, vw, vh, bw, bh);

        c.render(function() {
          c.t(self.left, self.top);
          c.scale(self.r, self.r);
          var vw = self.settings.screen.width;
          var vh = self.settings.screen.height;
          c.fillStyle = self.settings.screen.background;
          c.fillRect(0, 0, vw, vh);
          
          try {
            $(self.mainLayers).each(
                function() {
                  var layer = this;
                  c.render(function() {
                    layer.render && $.isFunction(layer.render)
                        && layer.render(page, c, vw, vh, bw, bh);
                  });
                });
          } catch (e) {
            console.log(e);
          }
          try {
            $(self.topLayers).each(
                function() {
                  var layer = this;
                  c.render(function() {
                    layer.render && $.isFunction(layer.render)
                        && layer.render(page, c, vw, vh, bw, bh);
                  });
                });
          } catch (e) {
            console.log(e);
          }
          try {
            var layer = self.ctrlLayer;
            c.render(function() {
              layer.render && $.isFunction(layer.render)
                  && layer.render(page, c, vw, vh, bw, bh);
            });
          } catch (e) {
            console.log(e);
          }

          self.afterRender(page, c, vw, vh, bw, bh);
          
        });

        
      });

      /**
       * 工具面板.
       */
      ws.ToolkitPanel = defClass(Component, function(settings) {
        var self = this;
        var vh = app.getLogicViewHeight();
        self.settings = $.extend({}, {
          width : 200,
          screenViewWidth : 1080
        }, self.settings, settings);
        self.r = self.settings.width / self.settings.screenViewWidth;
        self.innerPanel = new ScrollPanel({
          page : self,
          left : 0,
          top : 0,
          width : self.settings.screenViewWidth,
          height : vh / self.r
        });
      }, "ToolkitPanel");

      ws.ToolkitPanel.prototype.innerPanel = undefined;

      ws.ToolkitPanel.prototype.addComp = function(comp) {
        this.innerPanel.addComp(comp);
      };

      defineFunction.call(ws.ToolkitPanel.prototype,"renderComp", function(t, c, vw,
          vh) {
        var self = this;
        var left = vw - self.settings.width;
        var args = arguments;
        c.render(function() {
          c.t(left, 0);
          c.beginPath();
          c.rect(0, 0, vw, vh);
          c.closePath();
          c.clip();
          c.strokeStyle = "black";
          c.shadowColor = "black";
          c.shadowBlur = 5;
          c.shdaowOffsetX = 4;
          c.strokeLine(0, vh);
        });

        c.render(function() {
          c.t(left, 0);
          c.scale(self.r, self.r);
          // console.log(self.innerPanel.layout)
          self.innerPanel.render.apply(self.innerPanel, args);

        });
      });

      return ws;
    });